<template>
  <IBizPanelField :modelData="modelData" :controller="controller">
    <IBizEditorShell
      :class="ns.b()"
      :value="controller.value"
      :data="controller.data"
      :disabled="controller.state.disabled"
      :readonly="controller.state.readonly"
      @blur="onBlur"
      @focus="onFocus"
      @enter="onEnter"
      @change="onValueChange"
    />
  </IBizPanelField>
</template>

<script setup lang="ts">
import { IPanelField } from '@ibiz/model-core'
import { IPanelItemController } from '@ibiz-template/runtime'
// import { calcAttrs } from '@/utils'
import { useNamespace } from '@/use'

const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelField>,
    required: true,
  },
  controller: {
    type: Object as PropType<IPanelItemController>,
    required: true,
  },
})

const ns = useNamespace('panel-field')

// const attrs = calcAttrs(props.modelData, props.controller)

const onValueChange = (val: unknown, name?: string): void => {
  props.controller.setDataValue(val, name)
}

const onFocus = (event: MouseEvent): void => {
  props.controller.onFocus(event)
}

const onBlur = (event: MouseEvent): void => {
  props.controller.onBlur(event)
}

const onEnter = (event: MouseEvent): void => {
  props.controller.onEnter(event)
}
</script>
